<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>鑫隆物业管理系统</title>

<link href="${ctx }/css/bootstrap.css" rel="stylesheet" />
<link href="${ctx}/css/bootstrapValidator.css" rel="stylesheet" />
<link href="${ctx }/css/font-awesome.min.css" rel="stylesheet" />
<link href="${ctx }/css/ace.min.css" rel="stylesheet" />
<script src="${ctx }/js/jquery-3.2.1.js" type="text/javascript"></script>
<script src="${ctx }/js/bootstrap.js" type="text/javascript"></script>
<script src="${ctx }/js/ace-extra.min.js" type="text/javascript"></script>
<script src="${ctx }/js/ace.min.js" type="text/javascript"></script>
<script src="${ctx }/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="${ctx }/js/WdatePicker.js" type="text/javascript"></script>
<script src="${ctx }/js/jquery.dataTables.bootstrap.js"
	type="text/javascript"></script>
<script src="${ctx }/js/bootstrapValidator.js" type="text/javascript"></script>

<script type="text/javascript">
function logout() {
	$.ajax({
		type : "POST",
		url : "loginController/logout",
		success : function(result) {
			if (result.success) {
				window.location.href = 'loginController/toIndex';
			}
		}
	});
};

function amount(){
	var pay = $("#pay").val();
	$("#payfee").val(pay);
	$("#amountpayable").val(pay);
	
	var upay = $("#upay").val();
	$("#upayfee").val(upay);
	$("#uamountpayable").val(upay);
};

/**
 * 根据id获得物业资料
 */
function getChargeById(id){
	 $.ajax({  
	        url:"getChargeById?id=" + id,  
	        type:"get",
	        dataType:'json',
	        success:function(result){
	        	if(result.success){
	        		//给updateForm表单设置值
	        		$("#id").val(result.obj.id);
	        		$("#upay").val(result.obj.payfee);
	        		$("#uamountpayable").val(result.obj.amountpayable);
	        		$("#upayfee").val(result.obj.payfee);
	        		$("#remark").val(result.obj.remark);
	        		$("#paymentway option[value='"+result.obj.paymentway+"']").attr("selected",true);
	        		$("#accountsReceivableId option[value='"+result.obj.accountsReceivableId+"']").attr("selected",true);
	        		$("#payItemsId option[value='"+result.obj.payItemsId+"']").attr("selected",true);
	        		$("#dataId option[value='"+result.obj.dataId+"']").attr("selected",true);
	        		
	        		//显示修改模态框
	        		$(function() {
	       			   $("#updateModal").modal({
						   show: true
					   });
		        	});
		        }else{
		        	//提示信息
		        	alert(result.msg);
			    }
	        }
	 });  
};

//提交表单
$(document).ready(function() {
				//表单验证
				$('form')
					.bootstrapValidator({
						message: 'This value is not valid',
						feedbackIcons: {
							valid: 'glyphicon glyphicon-ok',
							invalid: 'glyphicon glyphicon-remove',
							validating: 'glyphicon glyphicon-refresh'
						},
						fields: {
							id: {
								message: '单据编号验证失败',
								validators: {
									notEmpty: {
										message: '单据编号不能为空！'
									}
								}
							},
							payItemsId: {
								validators: {
									notEmpty: {
										message: '收费项目不能为空！'
									}
								}
							},
							payfee: {
								validators: {
									notEmpty: {
										message: '交费金额不能为空！'
									}
								}
							}
						}
					})
					.on('success.form.bv', function(e) {
						// 阻止表单提交
						e.preventDefault();

						// 获得表单实例
						var $form = $(e.target);

						// 得到BootstrapValidator实例
						var bv = $form.data('bootstrapValidator');

						// 使用Ajax提交表单数据
						$.post($form.attr('action'), $form.serialize(), function(result) {
							//提示信息
							alert(result.msg);
							//刷新页面
							location.reload();
						}, 'json');
					});

				//删除
				$('#deleteModal').on('show.bs.modal', function(e) {
					$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
				});

				//取消
				//取消
				$('#addModal').on('hide.bs.modal', function() {
					alert("确认取消添加物业收费单据信息？");
				});
				$('#updateModal').on('hide.bs.modal', function() {
					alert("确认取消修改物业收费单据信息？");
				});
				$('#deleteModal').on('hide.bs.modal', function() {
					alert("确认取消删除物业收费单据信息？");
				});
			});
		</script>

<script type="text/javascript">
			jQuery(function($) {
				var oTable1 = $('#sample-table-2').dataTable({
					"aoColumns": [{
							"bSortable": false
						},
						null, null, null, null, null,null, null, null, null, null, null, null, null, null,null, null, null, null, null, null, null,
						{
							"bSortable": false
						}
					]
				});

				$('table th input:checkbox').on('click', function() {
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
						.each(function() {
							this.checked = that.checked;
							$(this).closest('tr').toggleClass('selected');
						});

				});

				$('[data-rel="tooltip"]').tooltip({
					placement: tooltip_placement
				});

				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();

					var off2 = $source.offset();
					var w2 = $source.width();

					if(parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
					return 'left';
				}
			})
		</script>
</head>

<body>
	<div style="overflow-y: auto; overflow-x: auto; width: 2250px;">
		<!-- header -->
		<div class="navbar navbar-default" id="navbar">
			<script type="text/javascript">
					try {
						ace.settings.check('navbar', 'fixed')
					} catch(e) {}
				</script>

			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<a href="#" class="navbar-brand"> <small> <i
							class="icon-leaf"></i> 鑫隆物业管理系统
					</small>
					</a>
					<!-- /.brand -->
				</div>
				<!-- /.navbar-header -->

				<div class="navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">
						<li class="grey"><a data-toggle="dropdown"
							class="dropdown-toggle" href="#"> <i
								class="icon-lock bigger-160"></i> 锁定
						</a></li>

						<li class="purple"><a data-toggle="dropdown"
							class="dropdown-toggle" href="#"> <i class="icon-wrench"></i>
								帮助
						</a></li>

						<li class="green"><a data-toggle="dropdown"
							class="dropdown-toggle" href="#"> <i
								class="icon-refresh bigger-230"></i> 刷新
						</a></li>

						<li class="light-blue"><a data-toggle="dropdown" href="#"
							class="dropdown-toggle"> <img class="nav-user-photo"
								src="${ctx }/images/user.jpg" alt="Jason's Photo" /> <span
								class="user-info"> <small>欢迎光临,</small>
									${sessionInfo.loginname }
							</span> <i class="icon-caret-down"></i>
						</a>

							<ul
								class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li><a href="#"> <i class="icon-cog"></i> 设置
								</a></li>

								<li><a href="#"> <i class="icon-user"></i> 个人资料
								</a></li>

								<li class="divider"></li>

								<li><a onclick="logout()"> <i class="icon-off"></i> 退出
								</a></li>
							</ul></li>
					</ul>
					<!-- /.ace-nav -->
				</div>
				<!-- /.navbar-header -->
			</div>
			<!-- /.container -->
		</div>
		<!-- /header -->

		<!-- left -->
		<div class="main-container" id="main-container">
			<script type="text/javascript">
					try {
						ace.settings.check('main-container', 'fixed')
					} catch(e) {}
				</script>

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="#"> <span
					class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<script type="text/javascript">
							try {
								ace.settings.check('sidebar', 'fixed')
							} catch(e) {}
						</script>

					<div class="sidebar-shortcuts" id="sidebar-shortcuts">
						<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
							<button class="btn btn-success">
								<i class="icon-signal"></i>
							</button>

							<button class="btn btn-info">
								<i class="icon-pencil"></i>
							</button>

							<button class="btn btn-warning">
								<i class="icon-group"></i>
							</button>

							<button class="btn btn-danger">
								<i class="icon-cogs"></i>
							</button>
						</div>

						<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
							<span class="btn btn-success"></span> <span class="btn btn-info"></span>

							<span class="btn btn-warning"></span> <span
								class="btn btn-danger"></span>
						</div>
					</div>
					<!-- #sidebar-shortcuts -->

					<!-- 左侧菜单 -->
					<ul class="nav nav-list">
						<li class="active"><a href="#"> <i class="icon-dashboard"></i>
								<span class="menu-text"> 控制台 </span>
						</a></li>

						<li class="active open"><a href="#" class="dropdown-toggle"> <i
								class="icon-desktop"></i> <span class="menu-text"> 物业收费管理
							</span> <b class="arrow icon-angle-down"></b>
						</a>

							<ul class="submenu">
								<li><a href="${ctx }/dataController/treeGrid"> <i
										class="icon-double-angle-right"></i> 物业资料录入编辑
								</a></li>

								<li><a href="${ctx }/meterController/treeGrid"> <i
										class="icon-double-angle-right"></i> 物业固定收费抄录修改
								</a></li>

								<li class="active"><a href="${ctx }/chargeController/treeGrid"> <i
										class="icon-double-angle-right"></i> 物业收费单据录入编辑
								</a></li>

								<li><a href="${ctx }/chargeController/selectAll"> <i
										class="icon-double-angle-right"></i> 物业收费单据统计查询
								</a></li>

								<li><a href="${ctx }/meterController/selectAll"> <i
										class="icon-double-angle-right"></i> 物业收费明细统计查询
								</a></li>

								<%-- <li><a href="${ctx }/charge/account.jsp"> <i
									class="icon-double-angle-right"></i> 物业收费单据台账管理
							</a></li> --%>

								<li><a href="${ctx }/dataController/statistics"> <i
										class="icon-double-angle-right"></i> 物业数据统计报表
								</a></li>
								<%-- 
							<li><a href="${ctx }/charge/moneyChange.jsp"> <i
									class="icon-double-angle-right"></i> 物业金额数据更改
							</a></li> --%>
							</ul></li>

						<%-- <li><a href="#" class="dropdown-toggle"> <i
							class="icon-list"></i> <span class="menu-text"> 物业应收费用管理 </span>
							<b class="arrow icon-angle-down"></b>
					</a>

						<ul class="submenu">
							<li><a href="${ctx }/receivables/accountsReceivable.jsp">
									<i class="icon-double-angle-right"></i> 物业应收费用录入编辑
							</a></li>

							<li><a href="${ctx }/receivables/statistics.jsp"> <i
									class="icon-double-angle-right"></i> 物业应收费用统计查询
							</a></li>

							<li><a href="${ctx }/receivables/account.jsp"> <i
									class="icon-double-angle-right"></i> 物业应收费用台账管理
							</a></li>
						</ul></li> --%>

						<li><a href="#" class="dropdown-toggle"> <i
								class="icon-edit"></i> <span class="menu-text"> 物业日常管理 </span> <b
								class="arrow icon-angle-down"></b>
						</a>

							<ul class="submenu">
								<li><a href="${ctx }/familyController/familyAll"> <i
										class="icon-double-angle-right"></i> 住户家庭成员查询
								</a></li>

								<li><a href="${ctx }/repairsController/repairsAll"> <i
										class="icon-double-angle-right"></i> 物业报修管理
								</a></li>

								<li><a href="${ctx }/complaintController/ComplaintAll">
										<i class="icon-double-angle-right"></i> 物业投诉管理
								</a></li>

								<li><a href="${ctx }/repairsStatisticsController/selectAll">
										<i class="icon-double-angle-right"></i> 物业报修统计
								</a></li>

								<li><a
									href="${ctx }/complaintStatisticsController/complaintStatisticsAll">
										<i class="icon-double-angle-right"></i> 物业投诉统计
								</a></li>

								<li><a href="${ctx}/securityController/selectAll"> <i
										class="icon-double-angle-right"></i> 保安事件管理
								</a></li>

								<li><a href="${ctx}/depotController/selectAll"> <i
										class="icon-double-angle-right"></i> 停车场管理
								</a></li>

								<li><a href="${ctx }/maintenanceController/selectAll">
										<i class="icon-double-angle-right"></i> 维修工程管理
								</a></li>
							</ul></li>

						<li><a href="#" class="dropdown-toggle"> <i
								class="icon-tag"></i> <span class="menu-text"> 基本数据录入编辑 </span>
								<b class="arrow icon-angle-down"></b>
						</a>

							<ul class="submenu">
								<li><a href="${ctx }/payTypeController/treeGrid"> <i
										class="icon-double-angle-right"></i> 收费类别资料录入编辑
								</a></li>

								<li><a href="${ctx }/payItemsController/treeGrid"> <i
										class="icon-double-angle-right"></i> 收费项目资料录入编辑
								</a></li>


								<li><a href="${ctx }/stateController/treeGrid"> <i
										class="icon-double-angle-right"></i> 物业状态颜色录入编辑
								</a></li>


								<li><a href="${ctx }/companyController/treeGrid"> <i
										class="icon-double-angle-right"></i> 公司资料录入编辑
								</a></li>

								<li><a href="${ctx }/departmentController/treeGrid"> <i
										class="icon-double-angle-right"></i> 部门资料录入编辑
								</a></li>

								<li><a href="${ctx }/employeeController/treeGrid"> <i
										class="icon-double-angle-right"></i> 单位员工资料录入编辑
								</a></li>
							</ul></li>

						<li><a href="#" class="dropdown-toggle"> <i
								class="icon-tag"></i> <span class="menu-text"> 系统管理 </span> <b
								class="arrow icon-angle-down"></b>
						</a>

							<ul class="submenu">
								<li><a href="${ctx }/userController/selectAll"> <i
										class="icon-double-angle-right"></i> 用户管理
								</a></li>
								<%-- 
							<li><a href="error-500.html"> <i
									class="icon-double-angle-right"></i> 用户口令修改
							</a></li>

							<li><a href="grid.html"> <i
									class="icon-double-angle-right"></i> 数据备份
							</a></li>

							<li><a href="blank.html"> <i
									class="icon-double-angle-right"></i> 数据恢复
							</a></li>

							<li><a href="${ctx }/roleController/selectAll"> <i
									class="icon-double-angle-right"></i> 用户权限设置
							</a></li> --%>
							</ul></li>
					</ul>
					<!-- /左侧菜单 -->

					<!-- 左侧菜单缩放 -->
					<div class="sidebar-collapse" id="sidebar-collapse">
						<i class="icon-double-angle-left"
							data-icon1="icon-double-angle-left"
							data-icon2="icon-double-angle-right"></i>
					</div>
					<!-- /左侧菜单缩放 -->
				</div>

				<!-- /left -->

				<!-- right -->
				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
								try {
									ace.settings.check('breadcrumbs', 'fixed')
								} catch(e) {}
							</script>

						<ul class="breadcrumb">
							<li><i class="icon-home home-icon"></i> <a href="#">首页</a></li>
							<li class="active">控制台</li>
						</ul>
						<!-- .breadcrumb -->
					</div>

					<!-- table-->
					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<div class="table-responsive">
									<table id="sample-table-2"
										class="table table-striped table-bordered table-hover">
										<thead>
											<tr>
												<th class="center"><label> <input
														type="checkbox" class="ace" /> <span class="lbl"></span>
												</label></th>
												<th>状态</th>
												<th>物业位置</th>
												<th>房号</th>
												<th>单据编号</th>
												<th><i class="icon-time bigger-110 hidden-480"></i>交费日期</th>
												<th>住户名称</th>
												<th>付款方式</th>
												<th>交费金额</th>
												<th>应交金额</th>
												<th>实交金额</th>
												<th>本次结存</th>
												<th>收费人员</th>
												<th>未付应收</th>
												<th>收费金额</th>
												<th>备注</th>
												<th>建档人员</th>
												<th><i class="icon-time bigger-110 hidden-480"></i>建档日期</th>
												<th>修改人员</th>
												<th><i class="icon-time bigger-110 hidden-480"></i>修改日期</th>
												<th>审核人员</th>
												<th><i class="icon-time bigger-110 hidden-480"></i>审核日期</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${list }" var="chargeList">
											<tr>
												<td class="center"><label> <input
														type="checkbox" class="ace" /> <span class="lbl"></span>
												</label></td>

														<td>${chargeList.data.state }</td>
													<td>${chargeList.data.items.address }</td>
													<td class="hidden-480">${chargeList.data.roomno }</td>
													<td>${chargeList.id }</td>
													<td><fmt:formatDate value="${chargeList.createtime }"
															pattern="yyyy-MM-dd" /></td>
													<td>${chargeList.data.inhabitant.name }</td>
													<td>${chargeList.paymentway }</td>
													<td>${chargeList.payfee }</td>
													<td>--${chargeList.amountpayable }</td>
													<td>${chargeList.payfee }</td>
													<td>--${chargeList.balance }</td>
													<td>${chargeList.executor.createUserName }</td>
													<td>${chargeList.notpay }</td>
													<td>--${chargeList.carryforward }</td>
													<td>${chargeList.remark }</td>
													<td>${chargeList.executor.createUserName }</td>
													<td><fmt:formatDate value="${chargeList.createtime }"
															pattern="yyyy-MM-dd" /></td>
													<td>${chargeList.executor.updateUserName }</td>
													<td><fmt:formatDate value="${chargeList.updatetime }"
															pattern="yyyy-MM-dd" /></td>
													<td>${chargeList.executor.checkUserName }</td>
													<td class="hidden-480"><fmt:formatDate
															value="${chargeList.executor.checktime }" pattern="yyyy-MM-dd" />
													</td>

												<td>
													<div
														class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
														<a class="blue" href="#"> <i
															class="icon-zoom-in bigger-130"></i></a> <a
															onclick="getChargeById(${chargeList.id})"
															data-toggle="modal"> <i
															class="icon-pencil bigger-130"></i></a> <a href="#"
															data-href="delete?id=${chargeList.id}"
															data-toggle="modal" data-target="#deleteModal"> <i
															class="icon-trash bigger-130"></i></a>
													</div>

													<div class="visible-xs visible-sm hidden-md hidden-lg">
														<div class="inline position-relative">
															<button class="btn btn-minier btn-yellow dropdown-toggle"
																data-toggle="dropdown">
																<i class="icon-caret-down icon-only bigger-120"></i>
															</button>

															<ul
																class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
																<li><a href="#" class="tooltip-info"
																	data-rel="tooltip" title="View"> <span class="blue">
																			<i class="icon-zoom-in bigger-120"></i>
																	</span>
																</a></li>

																<li><a href="#" class="tooltip-success"
																	data-rel="tooltip" title="Edit"> <span
																		class="green"> <i class="icon-edit bigger-120"></i>
																	</span>
																</a></li>

																<li><a href="#" class="tooltip-error"
																	data-rel="tooltip" title="Delete"> <span
																		class="red"> <i class="icon-trash bigger-120"></i>
																	</span>
																</a></li>
															</ul>
														</div>
													</div>
												</td>
											</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>

						<div id="modal-table" class="modal fade" tabindex="-1">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header no-padding">
										<div class="table-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">
												<span class="white">&times;</span>
											</button>
											Results for "Latest Registered Domains
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 添加模态框 -->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="addModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" type="button" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="addModalLabel">添加物业收费单据信息</h4>
				</div>
				<form id="addForm" method="post" action="add">
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>物业选择：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" name="dataId">
											<c:forEach items="${dataList }" var="dataList">
												<option value="${dataList.id }">${dataList.roomno }</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>收费项目：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" name="payItemsId">
											<c:forEach items="${payitemsList }" var="payitemsList">
												<option value="${payitemsList.id }">${payitemsList.name }</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>费用年月：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" name="accountsReceivableId">
											<c:forEach items="${accountsList }" var="accountsList">
												<option value="${accountsList.id }">${accountsList.costyears }</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>单据编号：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" name="id" class="form-control" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>付款方式：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" name="paymentway">
											<option>现金支付</option>
											<option>微信支付</option>
											<option>支付宝支付</option>
											<option>银行卡支付</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>交费金额：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" id="pay" name="payfee"
											class="form-control" onchange="amount()" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>应交金额：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" id="amountpayable" name="amountpayable"
											class="form-control" readonly="readonly" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>实交金额：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" id="payfee" class="form-control"
											 readonly="readonly" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>备注：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<textarea rows="10" cols="50" name="remark"
											style="overflow-y: scroll;"
											class="form-control col-md-6 col-sm-6 col-xs-6"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
						<button type="submit" class="btn btn-primary">提交数据</button>
					</div>
				</form>
			</div>
		</div>
	</div>

		<!-- 修改模态框 -->
		<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
			aria-labelledby="updateModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" type="button" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="updateModalLabel">修改物业收费单据信息</h4>
					</div>
					<form id="updateForm" method="post" action="update">
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>物业选择：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" id="dataId" name="dataId">
											<c:forEach items="${dataList }" var="dataList">
												<option value="${dataList.id }">${dataList.roomno }</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>收费项目：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" id="payItemsId" name="payItemsId">
											<c:forEach items="${payitemsList }" var="payitemsList">
												<option value="${payitemsList.id }">${payitemsList.name }</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>费用年月：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" id="accountsReceivableId" name="accountsReceivableId">
											<c:forEach items="${accountsList }" var="accountsList">
												<option value="${accountsList.id }">${accountsList.costyears }</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>单据编号：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" id="id" name="id" class="form-control" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>付款方式：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<select class="form-control" id="paymentway" name="paymentway">
											<option value="现金支付">现金支付</option>
											<option value="微信支付">微信支付</option>
											<option value="支付宝支付">支付宝支付</option>
											<option value="银行卡支付">银行卡支付</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>交费金额：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" id="upay" name="payfee"
											class="form-control" onchange="amount()" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>应交金额：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" id="uamountpayable" name="amountpayable"
											class="form-control" readonly="readonly" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>实交金额：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<input type="number" id="upayfee" class="form-control"
											 readonly="readonly" />
									</div>
								</div>
							</div>
							<div class="row table-bordered">
								<div class="form-group">
									<div class="col-md-4 col-sm-4 col-xs-4 text-right">
										<font>备注：</font>
									</div>
									<div class="col-md-8 col-sm-8 col-xs-8 table-bordered">
										<textarea rows="10" cols="50" id="remark" name="remark"
											style="overflow-y: scroll;"
											class="form-control col-md-6 col-sm-6 col-xs-6"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
						<div class="modal-footer">
							<button class="btn btn-default" type="button"
								data-dismiss="modal">取消</button>
							<button type="submit" class="btn btn-primary">提交更改</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- 删除模态框 -->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
			aria-labelledby="deleteModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" type="button" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="deleteModalLabel">提示信息</h4>
					</div>
					<div class="modal-body">确认要删除选择的数据吗？</div>
					<div class="modal-footer">
						<button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
						<a class="btn btn-success btn-ok">确定</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>